﻿<!Doctype html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/js/jquery-3.6.0.js"></script>
    <script src="/lib/layui/layui.all.js"></script>
    <script src="/js/schedule/vue.js"></script>
    <script src="/js/schedule/vue-router.js"></script>
    <script src="/js/schedule/axios.min.js"></script>
    <link rel="stylesheet" href="/js/schedule/customizedStyle.css">
    <link rel="stylesheet" href="/js/schedule/bootstrap.css">
    <link rel="stylesheet" href="/js/schedule/tavo-calendar.css">
    <script src="/js/schedule/jquery.js"></script>
</head>
<body>
<div id="block01">
    <!--    <button class="btn btn-primary" style="margin-right: 10px;background-color: #3AC2A9FF;"-->
    <!--            name="button" @click="getScheduleShow">查看日历-->
    <!--    </button>-->
    <div>
        <div style="display: inline-block;margin-left: 10px;width: 100px">
            <router-link to="/Schedule" class="btn btn-primary"
                         style="display:block;margin-right: 10px;margin-top:10px;background-color: #3AC2A9FF;"
                         name="button" tag="button">查看日历
            </router-link>
            <router-link to="/Schedulemanagement" class="btn btn-primary"
                         style="display:block;margin-top:10px;background-color: #3AC2A9FF;"
                         name="button" tag="button">添加日程
            </router-link>
            <router-link to="/Affairs" class="btn btn-primary"
                         style="display:block;margin-top:10px;background-color: #3AC2A9FF;"
                         name="button" tag="button">
                事务列表
            </router-link>
            <!--            <router-link to="/MyNotes" class="btn btn-primary" style="background-color: #3AC2A9FF;margin-top:10px;"-->
            <!--                         name="button" tag="button">-->
            <!--                我的便签-->
            <!--            </router-link>-->
            <!--            <button class="btn btn-primary" style="margin-left: 10px;background-color: #3AC2A9FF;" name="button"-->
            <!--                    @click="getUpdateFormShow">-->
            <!--                修改事务-->
            <!--            </button>-->

        </div>
    </div>
    <!--    <div v-show="ScheduleShow">-->
    <!--        <Schedule></Schedule>-->
    <!--    </div>-->
    <!--    <div v-show="ScheduleManagementShow == true">-->
    <!--        <Schedulemanagement></Schedulemanagement>-->
    <!--    </div>-->
    <!--    <div v-show="AffairsShow==true">-->
    <!--        <Affairs></Affairs>-->
    <!--    </div>-->
    <div style="margin-top: -100px;width:800px;margin-left: auto;margin-right: auto">
        <router-view></router-view>
    </div>
</div>


<!--Schedule-->
<template id="Schedule">


    <div id="ScheduleParent">
        <!--Hidden Id-->
        <input type="hidden" th:value="${session.user.id}" name="getUserID">

        <div style="margin-top: -100px;margin-left: 100px;width: 900px">


        </div>
        <div>
            <div style="display: inline-block;margin-top: 370px">
                <button class="btn btn-primary" style="margin-left: 10px;background-color:  #3AC2A9FF;"

                        @click="toggleRangeCalendar(); toggleTravelLeaveCountCheck()" v-if="rangeAndSingle==true">
                    时段模式
                </button>
                <button class="btn btn-primary" style="margin-left: 10px;background-color: #3AC2A9FF;"
                        name="button"
                        @click="toggleRangeCalendar(); toggleTravelLeaveCountCheck()" v-if="rangeAndSingle==false">
                    单日模式
                </button>
                <button class="btn btn-primary" style="margin-left: 10px;background-color: #3AC2A9FF;"
                        name="button"
                        @click="toggleTravelLeaveShow" v-if="rangeAndSingle==false&&travelLeaveShow==false">
                    查看出差详情
                </button>
                <button class="btn btn-primary" style="margin-left: 10px;background-color: #3AC2A9FF;"
                        name="button"
                        @click="toggleTravelLeaveShow" v-if="rangeAndSingle==false&&travelLeaveShow==true">
                    关闭出差详情
                </button>
<!--                <button class="btn btn-primary" style="margin-left: 10px;background-color: #3AC2A9FF;"-->
<!--                        name="button"-->
<!--                        @click="simulatedCalendar" v-if="rangeAndSingle==false&&travelLeaveShow==false&&toggleSimulatedCalendar==true">-->
<!--                    模拟日历-->
<!--                </button>-->
<!--                <button class="btn btn-primary" style="margin-left: 10px;background-color: #3AC2A9FF;"-->
<!--                        name="button"-->
<!--                        @click="closeSimulatedCalendar" v-if="rangeAndSingle==false&&travelLeaveShow==false&&toggleSimulatedCalendar==false">-->
<!--                    关闭模拟日历-->
<!--                </button>-->
                <!--                <span><b>您近期的出差时间是{{range.start}}&#45;&#45;{{range.end}}</b></span>-->
            </div>
            <div v-show="rangeAndSingle==true" style="display: inline-block;margin-top: 350px">
                <button class="btn btn-primary" style="margin-left: 10px;background-color:  #3AC2A9FF;"
                        id="specialButton"
                        @click="ShowMarkedDate" v-if="toggleToCheckDate==true">
                    关闭事务日期
                </button>
                <button class="btn btn-primary"
                        style="display: inline-block;margin-left: 10px;background-color: #3AC2A9FF;"
                        name="button"
                        @click="ShowMarkedDate" v-else-if="toggleToCheckDate==false">
                    查看事务日期
                </button>
                <div style="display: inline-block">
                    <button class="btn btn-primary" style="margin-left: 10px;background-color:  #3AC2A9FF;"
                            id="specialButton01"
                            v-if="showTaskPrompt==true&&toggleToCheckDate==true" @click="toggleShowTaskPrompt">
                        关闭事务详情
                    </button>
                    <button class="btn btn-primary" style="margin-left: 10px;background-color:  #3AC2A9FF;"
                            id="specialButton02"
                            v-if="showTaskPrompt==false&&toggleToCheckDate==true" @click="toggleShowTaskPrompt">
                        查看事务详情
                    </button>
                </div>

            </div>
        </div>
        <!--Single-->

        <div v-if="rangeAndSingle==true ">
            <div style="width:1000px;margin-left: auto;margin-right: 100px;margin-top:-370px;position:relative;">
                <div style="margin-bottom: 20px"><b>{{promptMessage}}</b>
                    &nbsp&nbsp&nbsp&nbsp&nbsp
                    <div style="display: inline-block;width:15px;height:15px;background-color: orange;"></div>
                    今日
                    &nbsp&nbsp&nbsp&nbsp&nbsp
                    <div style="display: inline-block;width:15px;height:15px;background-color: #5bcbf0;"></div>
                    事务日
                </div>
                <v-date-picker :attributes='attrs' is-expanded/>

            </div>
        </div>
        <!--Multi-->
        <div v-if="rangeAndSingle==false ">
            <div
                    style="width:1000px;margin-left: auto;margin-right: 100px;margin-top:-370px;position:relative;">
<!--                <div v-if="simulatedRange.start !='new Date()' && simulatedRange.end !='new Date()'">-->
<!--                    <div v-if="simulatedRange.start !='new Date()' && simulatedRange.end !='new Date()'"><b>{{promptMessage}}:&nbsp您近期的出差时间是<span style="font-size: 20px;color: red">[{{simulatedRange.start.getFullYear()+'-'+(simulatedRange.start.getMonth()+1)+'-'+simulatedRange.start.getDate()}}]</span>至<span-->
<!--                            style="font-size: 20px;color: red">[{{simulatedRange.end.getFullYear()+'-'+(simulatedRange.end.getMonth()+1)+'-'+simulatedRange.end.getDate()}}]</span></b>-->
<!--                    </div>-->
<!--                    <v-date-picker is-expanded color="blue" is-range v-model="simulatedRange"/>-->
<!--                </div>-->
                <div>
                    <div v-if="range.start !='' && range.end !=''" style="margin-bottom: 20px"><b>{{promptMessage}}:&nbsp您近期的出差时间是<span style="font-size: 20px;color: red">[{{range.start.getFullYear()+'-'+(range.start.getMonth()+1)+'-'+range.start.getDate()}}]</span>至<span
                            style="font-size: 20px;color: red">[{{range.end.getFullYear()+'-'+(range.end.getMonth()+1)+'-'+range.end.getDate()}}]</span></b><a title="前往出差申请界面查看" href="/to/chachaijilu"
                                                                                                                                                               style="text-decoration-line: none;color: black;margin-bottom: 20px"><span style="text-decoration: underline;color: #0dcaf0">&nbsp前往查看-></span></a>
                    </div>
                    <div v-else><span><b><a title="前往出差申请界面查看" href="/to/chachaijilu"
                                            style="text-decoration-line: none;color: black;margin-bottom: 20px">您近期没有任何出差计划，<span style="text-decoration: underline;color: #0dcaf0">前往查看-></span></a></b></span>
                    </div>

                    <div >
                        <v-date-picker is-expanded color="blue" is-range v-model="range"/>
                    </div>

                </div>

            </div>
        </div>

        <div v-show="showTaskPrompt==true&&rangeAndSingle==true">
            <table style="margin-left: 500px;width: 400px;border: 1px solid #dce6e8;margin-top: 20px"
                   class="table table-hover">
                <tr>
                    <td style="font-size: 20px" align="center"><b style="font-size: 20px">个人事务提醒</b></td>
                </tr>
                <tr>
                    <td>
                        <b>今天是&nbsp<span style="font-size: 20px;color: red"><b>[{{today}}]</b></span></b>
                    </td>
                </tr>
<!--                <tr>-->
<!--                    <td>-->
<!--                        <dd style="display: inline;margin-top: 35px;">-->
<!--                            <router-link to="/Affairs" title="查看事务" style="text-decoration-line: none;color:black"><b>您3天内有&nbsp<b><span-->
<!--                                    style="font-size: 20px;color: red">[{{inThreeDays.length}}]</span></b>&nbsp件个人事务需关注</b>-->
<!--                            </router-link>-->
<!--                        </dd>-->
<!--                    </td>-->
<!--                </tr>-->
                <tr>
                    <td>
                        <dd style="display: inline;margin-top: 35px;">
                            <router-link to="/Affairs" title="查看事务" style="text-decoration-line: none;color:black"><b>您共有&nbsp<b><span
                                    style="font-size: 20px;color: red">[{{totalAffairsCount}}]</span></b>&nbsp件个人事务需关注</b>
                            </router-link>
                        </dd>
                    </td>
                </tr>
                <tr>
                    <td>
                        <router-link to="/Affairs" title="查看事务" style="text-decoration-line: none;color:black"><b>本月您有&nbsp<b><span
                                style="font-size: 20px;color: red">[{{AffairsCountForMonth}}]</span></b>&nbsp件个人事务需关注</b>
                        </router-link>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span><b><a title="前往请假申请界面" href="/to/qingjiajilu"
                                    style="text-decoration-line: none;color: black"><b>您有&nbsp<b><span
                                style="font-size: 20px;color: red">[{{leaveApplyCount}}]</span></b>&nbsp份请假申请</b></a></b></span>
                    </td>
                </tr>
            </table>
        </div>

        <div v-show="travelLeaveShow==true">
            <table style="margin-left: 500px;width: 400px;border: 1px solid #dce6e8;margin-top: 20px"
                   class="table table-hover">
                <tr>
                    <td style="font-size: 20px" align="center"><b style="font-size: 20px">出差事务提醒</b></td>
                </tr>
                <tr>
                    <td>
                        <b>今天是&nbsp<span style="font-size: 20px;color: red"><b>[{{today}}]</b></span></b>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b><a title="前往出差申请界面查看" href="/to/chachaijilu"
                              style="text-decoration-line: none;color: black">您共有&nbsp<b><span
                                style="font-size: 20px;color: red">[{{travelLeaveCount}}]</span></b>&nbsp件出差事务在申请栏</a></b>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b><a title="前往出差申请界面查看" href="/to/chachaijilu"
                              style="text-decoration-line: none;color: black">您共有&nbsp<b><span
                                style="font-size: 20px;color: red">[{{dateProcessingNum}}]</span></b>&nbsp件出差事务在审核中</a></b>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!--        <label style="margin-left: 180px;margin-top:20px;font-style: italic"><b>您本月的工作弹性:&nbsp<b>{{taskTensionPrompt}}</b>&nbsp</b></label>-->


    <!--Old Code-->
    <!--        <div id="my-calendar1"-->
    <!--             style="width:900px;height:200px;margin-left: auto;margin-right: auto;margin-top: 25px"></div>-->
    <!--        <br>-->
    <!--            <button class="btn btn-primary" style="margin-left: 10px;background-color: #3AC2A9FF;" name="button"-->
    <!--                    @click="lastYear">-->
    <!--                上一个年份-->
    <!--            </button>-->
    <!--            <button class="btn btn-primary" style="margin-left: 10px;background-color: #3AC2A9FF;" name="button"-->
    <!--                    @click="nextYear">-->
    <!--                下一个年份-->
    <!--            </button>-->
    <!--            <button class="btn btn-primary" style="margin-left: 10px;background-color: #3AC2A9FF;" name="button"-->
    <!--                    @click="currentDate">-->
    <!--                回到本月-->
    <!--            </button>-->

</template>

<!--Add-Schedule-->
<template id="ScheduleManagement">
    <div>
        <!--        <div id="my-calendar2"-->
        <!--             style="width:450px;height:250px;margin-left: 100px;margin-top: 50px;border: 1px solid grey"></div>-->

        <!--        <div style="position: relative;width: 600px;margin-right: auto;margin-left: 150px;margin-top: 15px">-->
        <!--            <button class="btn btn-primary" style="margin-left: 10px;background-color: #3AC2A9FF;" name="button"-->
        <!--                    @click="lastYear">-->
        <!--                上一个年份-->
        <!--            </button>-->
        <!--            <button class="btn btn-primary" style="margin-left: 10px;background-color: #3AC2A9FF;" name="button"-->
        <!--                    @click="nextYear">-->
        <!--                下一个年份-->
        <!--            </button>-->
        <!--            <button class="btn btn-primary" style="margin-left: 10px;background-color: #3AC2A9FF;" name="button"-->
        <!--                    @click="currentDate">-->
        <!--                回到本日-->
        <!--            </button>-->
        <!--        </div>-->
        <!--Hidden Id-->
        <input type="hidden" th:value="${session.user.id}" name="getUserID">
        <div id="box01">
                <table align="center" class="table table-hover"
                       style="width: 1100px;margin-top:0px;margin-left:-100px;border: 1px solid grey">
                    <tr>
                        <td style="font-size: 30px;background-color: #20222A;color: white;" align="center" colspan="2"
                            class="lead"><b>添加日程</b></td>
                    </tr>
                    <tr>
                        <td align="center" colspan="2">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon1">标题</span>
                                </div>
                                <input type="text" class="form-control" placeholder="标题" aria-label="标题"
                                       aria-describedby="basic-addon1" v-model="title">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon2">日期</span>
                                </div>
                                <input type="date" value="" name="dateOption" v-model="date" class="form-control">
                            </div>
                        </td>
                        <td>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">时间</span>
                                </div>
                                <input type="time" value="" name="dateOption" v-model="time" class="form-control">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <label class="input-group-text" for="inputGroupSelect01">事务类型</label>
                                </div>
                                <select class="custom-select" id="inputGroupSelect01"
                                        style="border: 1px solid #d9d9d9;width: 270px" v-model="type">
                                    <option v-for="type in typeProps">{{type}}</option>
                                </select>
                            </div>
                        </td>
                        <td>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <label class="input-group-text" for="inputGroupSelect01">事务联系人</label>
                                </div>
                                <select class="custom-select" id="inputGroupSelect02"
                                        style="border: 1px solid #d9d9d9;width: 300px" v-model="contact">
                                    <option v-for="contact in contactProps">{{contact}}</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <label class="input-group-text" for="inputGroupSelect01">地点</label>
                                </div>
                                <select class="custom-select" id="inputGroupSelect05"
                                        style="border: 1px solid #d9d9d9;width: 300px" v-model="location">
                                    <option v-for="location in locationProps">{{location}}</option>
                                </select>
                            </div>
                        </td>
                        <td>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <label class="input-group-text" for="inputGroupSelect01">时长</label>
                                </div>
                                <select class="custom-select" id="inputGroupSelect03"
                                        style="border: 1px solid #d9d9d9;width: 350px" v-model="durationShowAndSend">
                                    <option v-for="durationTime in duration">{{durationTime}}</option>
                                </select>
                            </div>
                            <div class="input-group mb-3" v-if="durationShowAndSend=='选择...'">
                                <div class="input-group-prepend">
                                    <label class="input-group-text" for="inputGroupSelect01">您选择的时长 : </label>
                                </div>
                            </div>
                            <div class="input-group mb-3" v-if="durationShowAndSend!='选择...'">
                                <div class="input-group-prepend">
                                    <label class="input-group-text" for="inputGroupSelect01">您选择的时长 :
                                        {{durationShowAndSend}}&nbsp小时</label>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon5">内容</span>
                                </div>
                                <br>
                                <br>
                                <br>
                                <textarea type="text" name="" style="resize: none;width: 600px;height: 200px"
                                          maxlength="200"
                                          placeholder="内容上限200" class="form-control" v-model="topic"></textarea>
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td align="center" colspan="2">
                            <input type="submit" value="提交"
                                   style="padding-left: 10px;padding-right: 10px;background-color: #3AC2A9FF;"
                                   class="btn btn-primary" name="button" @click="addData">
                            <input type="reset" value="重置"
                                   style="padding-left: 10px;padding-right: 10px;background-color: #3AC2A9FF;"
                                   class="btn btn-primary" name="button">
                        </td>
                    </tr>
                </table>

        </div>
    </div>

</template>
<!--Schedule Affairs List-->
<template id="Affairs">

    <!--        <input type="hidden" th:attr="'v-bind:value='+${schedule.getId()}">-->
    <!--        th:@click="|updateScheduleData(${schedule.getId()})|"-->
    <div>
        <!--        <input type="button" value="This is a test button" @click="testUserId">-->
        <input type="hidden" th:value="${session.user.id}" name="getUserID">
        <table class="table table-hover" style="width: 1100px;margin-top:0px;margin-left:-100px;border: 1px solid grey"
               align="center">
            <tr>
                <td style="font-size: 30px;background-color: #20222A;color: white" align="center" colspan="11"
                    class="lead">
                    <b>事务列表</b></td>
                </td>
            </tr>
            <tr>
                <td colspan="3" align="center" style="border: 1px solid grey;font-size: 20px">
                    <label><b>标题快查</b></label>
                </td>
                <td colspan="3" align="center" style="border: 1px solid grey;font-size: 20px">
                    <label><b>时间段查询</b></label>
                </td>
                <td colspan="5" align="center" style="border: 1px solid grey;font-size: 20px">
                    <label><b>属性查询</b></label>
                </td>
            </tr>
            <tr>
                <td colspan="3" align="center" style="border: 1px solid grey">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon6">标题快查</span>
                        </div>
                        <input type="text" class="form-control" placeholder="输入关键字" aria-label="标题快查"
                               aria-describedby="basic-addon1" v-model="keyword">
                    </div>
                </td>
                <td colspan="3" align="center" style="border: 1px solid grey">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon7">起始时间</span>
                        </div>
                        <input type="date" value="" name="dateOption" v-model="dateStart" class="form-control">
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon8">末尾时间</span>
                        </div>
                        <input type="date" value="" name="dateOption" v-model="dateEnd" class="form-control">
                    </div>
                </td>
                <td colspan="4" align="center">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="inputGroupSelect01">联系人查询</label>
                        </div>
                        <select v-model="contact" class="custom-select" id="inputGroupSelect04"
                                style="border: 1px solid #d9d9d9;width: 250px">

                            <option v-for="(contact,index) in contactProps">{{contact}}</option>
                        </select>
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="inputGroupSelect01">类型查询</label>
                        </div>
                        <select v-model="type" class="custom-select" id="inputGroupSelect0"
                                style="border: 1px solid #d9d9d9;width: 265px">

                            <option v-for="type in typeProps">{{type}}</option>
                        </select>
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="inputGroupSelect01">地点查询</label>
                        </div>
                        <select v-model="location" class="custom-select" id="inputGroupSelect07"
                                style="border: 1px solid #d9d9d9;width: 265px">

                            <option v-for="location in locationProps">{{location}}</option>
                        </select>
                    </div>
                </td>
                <td style="border: 1px solid grey" align="center">
                    <input type="button" value="查询" class="btn btn-primary" name="button"
                           style="background-color: #3AC2A9FF;margin-top:25px" @click="showAllAffair">
                    <br>
                    <input type="reset" value="重置" class="btn btn-primary" name="button"
                           style="background-color: #3AC2A9FF;margin-top:20px" @click="reloadPage">
                </td>

            </tr>
            <tr>
                <td align="center"><b>编号</b></td>
                <td align="center"><b>标题</b></td>
                <td align="center"><b>日期</b></td>
                <td align="center"><b>时间</b></td>
                <td align="center"><b>事务类型</b></td>
                <td align="center"><b>时长</b></td>
                <td align="center"><b>地点</b></td>
                <td align="center"><b>内容</b></td>
                <td align="center"><b>选择联系人</b></td>
                <td colspan="2" align="center"><b>管理</b></td>
            </tr>
            <tr v-for="(affairShow,index) in affairs">
                <td align="center">{{(currentPage - 1) * pageSize + index + 1}}</td>
                <td align="center">{{affairShow.title}}</td>
                <td align="center">{{affairShow.date}}</td>
                <td align="center">{{affairShow.time}}</td>
                <td align="center">{{affairShow.type}}</td>
                <td align="center">{{affairShow.duration}}</td>
                <td align="center">{{affairShow.location}}</td>
                <td align="center">{{affairShow.topic}}</td>
                <td align="center" style="border-right: 1px solid grey">{{affairShow.contactName}}</td>
                <td align="center"><input name="button" type="button" value="删除" class="btn btn-primary"
                                          style="background-color: #3AC2A9FF;" @click="getDeletedData(affairShow.id)">
                </td>
                <td align="center"><input name="button" type="button" value="修改"
                                          class="btn btn-primary"
                                          style="background-color: #3AC2A9FF"
                                          @click="queryUpdatedTarget(affairShow.id)">
                </td>

            </tr>
            <tr>
                <td align="center" colspan="11" style="border: 1px solid grey">
                    <input type="button" value="首页" class="btn btn-primary" name="button"
                           style="background-color: #3AC2A9FF;" @click="getHomePage">
                    <input type="button" value="上一页" class="btn btn-primary" name="button"
                           style="background-color: #3AC2A9FF;" @click="getLastPage">
                    &nbsp
                    <div style="font-size: 18px;display: inline;" v-if="pageCount!=0">
                        <span>{{currentPage}}</span><b>/</b><span>{{pageCount}}</span>
                    </div>
                    <div style="font-size: 18px;display: inline;" v-else-if="pageCount==0">
                        <span>1</span><b>/</b><span>1</span>
                    </div>
                    &nbsp
                    <input type="button" value="下一页" class="btn btn-primary" name="button"
                           style="background-color: #3AC2A9FF;" @click="getNextPage">
                    <input type="button" value="尾页" class="btn btn-primary" name="button"
                           style="background-color: #3AC2A9FF;" @click="getEnd">

                </td>
                <!--                <td align="center" style="border-left: none">-->
                <!--&lt;!&ndash;                    <div style="font-size: 25px;display: inline;" v-if="pageCount!=0">&ndash;&gt;-->
                <!--&lt;!&ndash;                        <span>{{currentPage}}</span><b>/</b><span>{{pageCount}}</span>&ndash;&gt;-->
                <!--&lt;!&ndash;                    </div>&ndash;&gt;-->
                <!--&lt;!&ndash;                    <div style="font-size: 25px;display: inline;" v-else-if="pageCount==0">&ndash;&gt;-->
                <!--&lt;!&ndash;                        <span>0</span><b>/</b><span>{{pageCount}}</span>&ndash;&gt;-->
                <!--&lt;!&ndash;                    </div>&ndash;&gt;-->
                <!--                </td>-->
            </tr>
        </table>
    </div>
</template>

<!--<template id="MyNotes">-->
<!--    <div style="width:950px;margin-left: auto;margin-right: 100px;margin-top: -350px;position:relative;">-->
<!--        <v-date-picker is-expanded color="blue" is-range />-->
<!--    </div>-->
<!--</template>-->
<!--V-Calendar-->
<script src="/js/schedule/v--calendar.js" charset="utf-8"></script>
</body>

<!--Vue Path (Start)-->
<script src="/js/schedule/schedule.js"></script>
<!--Vue Path (End)-->
<!--Calendar static doc (Start)-->
<script src="/js/schedule/moment-with-locales.min.js"></script>
<script src="/js/schedule/tavo-calendar.js"></script>
<!--Calendar static doc (End)-->
<script src="/js/schedule/jquery.js"></script>
<script src="/js/schedule/customizedJquery.js"></script>

</html>
